<script lang="ts" setup name="wk">
import { addCache } from "@@/hooks/routeCache";
import { _require } from "@@/utils/tools";
import router from "@@/router";
import { apiWkTaskList } from "@@/api/wk/list";
import { useCrequestListRef } from "@@/components/common/CrequestList/index";

addCache("wk");

const { t } = useI18n();
const buttons = computed(() => [
  {
    text: t("wo-de-reng-wu"),
    click() {
      router.push({ name: "wk-myTask" });
    },
  },
  {
    text: t("zhong-cai-ju"),
    click() {
      router.push({ name: "wk-arbitration" });
    },
  },
]);

const CrequestListRef = useCrequestListRef();

const searchText = ref<string>();
const inSearch = ref(false);
async function search() {
  if (!searchText.value || !CrequestListRef.value) return;
  inSearch.value = true;
  CrequestListRef.value.data.length = 0;
  await nextTick();
  await CrequestListRef.value.rerequest();
}
async function exitSearch() {
  searchText.value = "";
  if (!inSearch.value) return;
  inSearch.value = false;
  await nextTick();
  CrequestListRef.value?.rerequest();
}
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <VanForm @submit="search">
        <Rinput
          v-model="searchText"
          :placeholder="$t('qing-shu-ru-guan-jian-ci-sou-suo-ren-wu')"
          :type="'search'"
          right-icon="search"
          @click-right-icon="search"
          @clear="exitSearch"
          clearable
          :clear-trigger="'always'"
          :border-mode="'all'"
          class="R-max"
        >
        </Rinput>
      </VanForm>
      <div class="flex-J-SB gap-sm">
        <Rbutton
          v-for="button in buttons"
          @click="button.click"
          bg="var(--C-M1-O2)"
          class="flex-1"
          round
          black
        >
          {{ button.text }}
        </Rbutton>
      </div>

      <CrequestList
        ref="CrequestListRef"
        :api="apiWkTaskList"
        :params="{ keyword: searchText }"
      >
        <template #item="{ item }">
          <BwkTaskListItem :item="item" :watchword="searchText" />
        </template>
      </CrequestList>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped></style>
